<template>
	<view class="w-time-picker" :class="{'show':showTimePicker}">
		<!-- <uni-swiper-dot :dots-styles="dotsStyles" mode="round" field="content" :current="0"> -->
		<swiper class="swiper" :indicator-dots="true" style="height: 170rpx; background-color: #EA4159;"
			indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in dateList" :key="index" class="swiper-item">
				<view v-for="(day,d) in item" :key="d" class="day" :class="{active:day.isToday}"
					@click="selectDate(day)">
					<view class="week">{{day.week}}</view>
					<view class="time">{{day.day}}
						<text class="zhe" v-if="d != 0">折</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- </uni-swiper-dot> -->
	</view>
</template>

<script>
	let _this = null;
	export default {
		props: {
			afterDays: {
				type: [String, Number],
				default: 7
			},
			startHour: {
				type: [String, Number],
				default: 7
			},
			endHour: {
				type: [String, Number],
				default: 19
			},
			step: {
				type: [String, Number],
				default: 30
			},
			afterHours: {
				type: [String, Number],
				default: 2
			},
			themes: {
				type: String,
				default: "#f5a200"
			}
		},
		data() {
			return {
				dayList: [],
				timeList: [],
				tabIndex: 0,
				itemIndex: -1,
				showTimePicker: true,
				time: "",
				dateList: [],
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				}

			}
		},
		created() {
			_this = this;
			_this.initPicker();
			_this.initHours();


		},
		methods: {

			selectDate(dayItem) {
				_this.dateList.forEach(item => {

					item.forEach(val => {
						val.isToday = false
					})
				})
				dayItem.isToday = true
				_this.$emit('selection', dayItem)
			},

			hide() {
				_this.showTimePicker = false;
				_this.$emit("cancel");
			},
			show() {
				_this.showTimePicker = true;
			},
			submit() {
				if (_this.time != "") {
					let tabItem = _this.dayList[_this.tabIndex];
					let result = tabItem.year + "-" + tabItem.month + "-" + tabItem.day + " " + _this.time.label + ":00";
					_this.$emit("confirm", result);
					_this.showTimePicker = false;
				}
			},
			toggleIndex(item, index) {
				_this.tabIndex = index;
				_this.itemIndex = -1;
				_this.initHours(!item.isToday);
			},
			toggleItem(item, index) {
				if (!item.disabled) {
					_this.itemIndex = index;
					_this.time = item;
				}
			},
			forMatNumber(n) {
				return n < 10 ? '0' + n : n
			},
			initHours(flag) {
				let aDate = new Date();
				let curHour = aDate.getHours();
				_this.timeList = [];
				for (let j = _this.startHour * 1; j < _this.endHour * 1; j++) {
					for (let k = 0; k < 60; k += _this.step * 1) {
						if (flag) {
							_this.timeList.push({
								label: _this.forMatNumber(j) + ":" + _this.forMatNumber(k),
								disabled: false
							});
						} else {
							_this.timeList.push({
								label: _this.forMatNumber(j) + ":" + _this.forMatNumber(k),
								disabled: curHour + _this.afterHours < j ? false : true
							});
						}
					}
				};
			},
			initPicker() {
				let aDate = new Date();
				let weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				_this.dayList.push({
					year: aDate.getFullYear(),
					month: _this.forMatNumber(aDate.getMonth() + 1),
					day: _this.forMatNumber(aDate.getDate()),
					week: weekList[aDate.getDay()],
					isToday: true
				})
				for (let i = 1; i < _this.afterDays * 1; i++) {
					aDate.setDate(aDate.getDate() + 1);
					_this.dayList.push({
						year: aDate.getFullYear(),
						month: _this.forMatNumber(aDate.getMonth() + 1),
						day: _this.forMatNumber(aDate.getDate()),
						week: weekList[aDate.getDay()],
						isToday: false
					})
				};
				_this.dateList = _this.cutArray(_this.dayList, 7)
				_this.selectDate(_this.dateList[0][0])
				// console.log('_this.dayList',_this.dateList)
			},
			cutArray(array, subLength) {
				let index = 0;
				let newArr = [];
				while (index < array.length) {
					newArr.push(array.slice(index, index += subLength));
				}
				return newArr;
			}


		}
	}
</script>

<style lang="scss">
	/deep/.uni-swiper-dots {
		bottom: 40rpx !important;
	}

	.swiper-item {
		display: flex;
		justify-content: space-between;

		.day {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			view {
				width: 100%;
				padding: 10rpx 0;
				font-size: 24rpx;
				background-color: #F8F9F9;
				position: relative;

				.zhe {
					position: absolute;
					top: 0;
					right: 6rpx;
					background-color: #f7c666;
					padding: 2rpx;
					font-size: 24rpx;
					transform: scale(0.8);
				}
			}

		}

		.active {

			.week {
				background-color: #FBCE5F;
			}

			.time {
				background-color: #FFE297;

			}
		}
	}

	.w-time-picker.show {
		// transform: translate3d(0,0,0);
	}

	.w-time-picker {
		// position: fixed;
		// left:0;
		// top:0;
		// width: 100%;
		// height: 100%;
		// z-index: 9999;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;

		/* #ifdef MP-WEIXIN */
		height: 150rpx;
		/* #endif */

		// transform: translate3d(100%,0,0);
		// transition: all 0.3s ease;
		.w-time-days {
			overflow: hidden;
			padding: 20upx 0;
			background-color: #fff;

			.w-time-scroll {
				white-space: nowrap;
			}

			.w-time-day {
				display: inline-block;
				width: 120upx;
				text-align: center;
				border: solid 1px #ddd;
				margin: 0 20upx;
				border-radius: 6upx;
				padding: 10upx 0;
				color: #333;

				.w-time-week {
					font-size: 28upx;
					line-height: 1;
				}

				.w-time-date {
					font-size: 24upx;
					line-height: 1;
					margin-top: 10upx;
				}
			}

			.w-time-day-active {
				color: #f00;
				border-color: #f00;
			}
		}

		.w-time-body {
			flex: 1;
			overflow: hidden;

			.w-time-list-scroll {
				height: 100%;
			}

			.w-time-list {
				display: flex;
				flex-wrap: wrap;
				padding: 20upx 10upx;
			}

			.w-time-item {
				width: 120upx;
				height: 64upx;
				line-height: 64upx;
				margin: 0 10upx 20upx;
				text-align: center;
				border: solid 1px #ddd;
				border-radius: 6upx;
				font-size: 28upx;
				transition: all 0.3s ease;
			}

			.w-time-item-active {
				background-color: #fff;
			}
		}

		.w-time-footer {
			height: 88upx;
			display: flex;
			background-color: #fff;

			.w-time-btn {
				flex: 1;
				text-align: center;
				line-height: 88upx;
				font-size: 30upx;
			}

			.w-time-sure {
				background-color: #f00;
				color: #fff;
			}
		}
	}
</style>
